<template>
	<div class="index-pro-type">
			<div class="container">
				<div class="mobile">
					<div class="box-title">
						<h2 class="title">{{detail.name}}</h2>
						<div class="more">
							<a href="">查看全部
								<i class="el-icon-arrow-right"></i>
							</a>
						</div>
					</div>
					<!-- type1 -->
					<div class="flex flex-row" style="padding: 0;margin: 0;" v-if="proType === 1">
						<div class="mobile-content-left">
							<ul>
								<li>
									<img :src="detail.coverImg"	alt="">
								</li>
							</ul>
						</div>
						<div class="mobile-content-right">
							<ul class="flex flex-row flex-wrap">
								<ProItem v-for="item in detail.child" :key="item.id" :detail="item"></ProItem>
							</ul>
						</div>
					</div>
					<!-- type2 -->
					<div class="flex flex-row" style="padding: 0;margin: 0;" v-else-if="proType === 2">
						<div class="mobile-content-left-type2">
							<ul>
								<li>
									<img :src="detail.coverImg"	alt="">
								</li>
								<li>
									<img :src="detail.coverImg"	alt="">
								</li>
							</ul>
						</div>
						<div class="mobile-content-right">
							<ul class="flex flex-row flex-wrap">
								<li v-for="(item) in detail.child" :key="item.id"><a href="">
										<div class="mobile-img">
											<img :src="item.img" :alt="item.name" >
										</div>
										<h3 class="title">{{item.name}}</h3>
										<p class="desc">{{item.title}}</p>
										<p class="price">
											<span>{{item.price}}</span>元起
										</p>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="home-appliances"></div>
			</div>
		</div>
</template>

<script lang="ts" src="./index-pro-type.ts" />
<style lang="scss" src="./index-pro-type.scss" />
